

<!-- 引入 API 封装 -->
<!-- <script src="{{ asset('js/api.js') }}"></script> -->
<!-- <script src="{{ asset('js/store-apply-api.js') }}"></script> -->

<div id="appvue">
    <el-container>
        <el-main>
            <!-- 搜索筛选区域 -->
            <el-card class="mb-4">
                <div slot="header">
                    <span><i class="el-icon-search"></i> 搜索筛选</span>
                </div>
                <el-form :model="searchForm" class="search-form">
                    <!-- 第一行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="门店名称">
                                <el-input v-model="searchForm.store_name" placeholder="请输入门店名称" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店申请人ID">
                                <el-input v-model="searchForm.applicant_id" placeholder="请输入申请人ID" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="申请人姓名/昵称/手机号">
                                <el-input v-model="searchForm.applicant_info" placeholder="请输入姓名/昵称/手机号" clearable></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第二行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="门店所在省">
                                <el-select v-model="searchForm.province" placeholder="选择省" clearable @change="onProvinceChange" style="width: 100%;">
                                    <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
                                </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店所在市">
                                <el-select v-model="searchForm.city" placeholder="选择市" clearable @change="onCityChange" style="width: 100%;">
                                    <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
                                </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店所在区县">
                                <el-select v-model="searchForm.district" placeholder="选择区县" clearable style="width: 100%;">
                                    <el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id"></el-option>
                                </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="申请时间">
                                <el-date-picker
                                    v-model="searchForm.date_range"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;">
                                </el-date-picker>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第三行 -->
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="审核状态">
                                <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 100%;">
                            <el-option label="待审核" value="0"></el-option>
                            <el-option label="审核通过" value="1"></el-option>
                            <el-option label="审核拒绝" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-top:40px">
                            <el-form-item label="">
                                <div style="display: flex; gap: 10px;">
                        <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
                                    <!-- <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button> -->
                                </div>
                    </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <!-- 申请列表 -->
            <el-card>
                <div slot="header">
                    <span><i class="el-icon-document"></i> 申请列表</span>
                    <span class="text-muted ml-2">(共 @{{ pagination.total }} 条记录)</span>
                </div>
                
                <el-table :data="applications" v-loading="loading" stripe style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80" sortable>
                        <template slot-scope="scope">
                            <strong>@{{scope.row.id}}</strong>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="submitted_at" label="申请时间" width="120"></el-table-column>
                    
                    <el-table-column label="申请人" width="200">
                        <template #default="scope">
                            <div class="applicant-info">
                                <el-avatar :src="scope.row.applicant.avatar" :size="32" class="mr-2">
                                    @{{ scope.row.applicant.name.charAt(0) }}
                                </el-avatar>
                                <div class="info-text">
                                    <div class="name">@{{ scope.row.applicant.name }}</div>
                                    <div class="id text-muted">ID: @{{ scope.row.applicant.id }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="phone" label="姓名手机号" width="120">
                        <template #default="scope">
                            <div>@{{ scope.row.realname }} @{{ scope.row.phone }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pickup_name" label="所在省市" width="120">
                        <template #default="scope">
                            <div>
                                <el-tooltip :content="scope.row.address" placement="top">
                                    <div class="address text-muted">@{{ scope.row.address.length > 30 ? scope.row.address.substring(0, 30) + '...' : scope.row.address }}</div>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="category_name" label="门店分类" width="120"></el-table-column>
                    
                    <el-table-column label="门店名称" width="250">
                        <template #default="scope">
                            <div>
                                <div class="store-name">@{{ scope.row.store_name || '未填写' }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="审核状态" width="120">
                        <template #default="scope">
                            <el-tag :type="getStatusType(scope.row.status_class)" size="small">
                                @{{ scope.row.status }}
                            </el-tag>
                            <div v-if="scope.row.reviewed_at" class="reviewed-time text-muted">
                                @{{ scope.row.reviewed_at }}
                            </div>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="mini" type="info" @click="showDetail(scope.row.id)" icon="el-icon-view">查看</el-button>
                            <template v-if="scope.row.status === '待审核'">
                                <el-button size="mini" type="success" @click="approveApplication(scope.row.id)" icon="el-icon-check">通过</el-button>
                                <el-button size="mini" type="danger" @click="rejectApplication(scope.row.id)" icon="el-icon-close">拒绝</el-button>
                            </template>
                            <template v-else>
                                <span class="text-muted">已审核</span>
                                <el-tooltip v-if="scope.row.reason" :content="scope.row.reason" placement="top">
                                    <i class="el-icon-info text-info ml-1"></i>
                                </el-tooltip>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页 -->
                <div class="pagination-wrapper mt-3" v-if="pagination.total > 0">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="pagination.page"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <!-- 拒绝原因弹窗 -->
    <el-dialog title="拒绝申请" :visible.sync="rejectDialogVisible" width="500px">
        <el-form :model="rejectForm" label-width="80px">
            <el-form-item label="拒绝原因" required>
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入拒绝原因..."
                    v-model="rejectForm.reason">
                </el-input>
                <div class="form-text text-muted mt-1">请详细说明拒绝原因，以便申请人了解并改进。</div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="rejectDialogVisible = false">取消</el-button>
            <el-button type="danger" @click="confirmReject" :loading="rejecting">确认拒绝</el-button>
        </div>
    </el-dialog>

    <!-- 审核通过弹窗 -->
    <el-dialog title="审核通过" :visible.sync="approveDialogVisible" width="480px" @close="handleApproveDialogClose">
        <el-form :model="approveForm" label-width="120px">
            <el-form-item label="授信额度">
                <el-radio-group v-model="approveForm.enableQuota">
                    <el-radio :label="true">开启</el-radio>
                    <el-radio :label="false">不开启</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="额度金额" v-if="approveForm.enableQuota">
                <el-input v-model="approveForm.quotaAmount" placeholder="请输入授信额度">
                    <template slot="prepend">￥</template>
                </el-input>
                <div class="form-text text-muted mt-1">默认额度为￥1000.00，可根据需要调整。</div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="approveDialogVisible = false">取消</el-button>
            <el-button type="primary" :loading="approveSubmitting" @click="submitApprove">确认</el-button>
        </span>
    </el-dialog>

    <!-- 申请详情弹窗 -->
    <el-dialog title="申请详情" :visible.sync="detailDialogVisible" width="1000px" :close-on-click-modal="false">
        <div v-loading="detailLoading">
            <div v-if="detailData" class="detail-content">
                <!-- 基本信息 -->
                <el-card class="mb-3">
                    <div slot="header">
                        <span><i class="el-icon-user"></i> 基本信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>申请ID：</label>
                                <span>@{{ detailData.id }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>用户名：</label>
                                <span>@{{ detailData.username }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>真实姓名：</label>
                                <span>@{{ detailData.realname }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mt-2">
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>手机号：</label>
                                <span>@{{ detailData.mobile }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>申请时间：</label>
                                <span>@{{ detailData.created_at }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>审核状态：</label>
                                <el-tag :type="getStatusType(detailData.status_class)" size="small">
                                    @{{ detailData.status_text }}
                                </el-tag>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 门店信息 -->
                <el-card class="mb-3">
                    <div slot="header">
                        <span><i class="el-icon-shop"></i> 门店信息</span>
                    </div>
                    <el-row :gutter="20" v-if="detailData.information">
                        <el-col :span="12">
                            <div class="detail-item">
                                <label>门店名称：</label>
                                <span>@{{ detailData.information.store_name || detailData.store_name }}</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="detail-item">
                                <label>门店分类：</label>
                                <span>@{{ detailData.store_category || '未填写' }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information">
                        <el-col :span="12">
                            <div class="detail-item">
                                <label>门店电话：</label>
                                <span>@{{ detailData.store_phone || '未填写' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <!-- <div class="detail-item">
                                <label>订单ID：</label>
                                <span>@{{ detailData.order_id || '无' }}</span>
                            </div> -->
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>门店地址：</label>
                                <span>@{{ detailData.address || detailData.store_address || '未填写' }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="20" class="mt-2" v-if="detailData.province_name || detailData.city_name || detailData.district_name">
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>所在省份：</label>
                                <span>@{{ detailData.province_name || '-' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>所在城市：</label>
                                <span>@{{ detailData.city_name || '-' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>所在区县：</label>
                                <span>@{{ detailData.district_name || '-' }}</span>
                            </div>
                        </el-col>
                    </el-row> -->
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information && (detailData.information.business_hours_start || detailData.information.business_hours_end)">
                        <el-col :span="12">
                            <div class="detail-item">
                                <label>营业时间：</label>
                                <span>@{{ detailData.information.business_hours_start || '--' }} - @{{ detailData.information.business_hours_end || '--' }}</span>
                            </div>
                        </el-col>
                        <!-- <el-col :span="12" v-if="detailData.information.lng && detailData.information.lat">
                            <div class="detail-item">
                                <label>经纬度：</label>
                                <span>@{{ detailData.information.lng }}, @{{ detailData.information.lat }}</span>
                            </div>
                        </el-col> -->
                    </el-row>
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information && detailData.information.thumb">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>门店图片：</label>
                                <div class="image-preview-list">
                                    <el-image
                                        class="preview-thumbnail"
                                        :src="detailData.information.thumb"
                                        :preview-src-list="[detailData.information.thumb]"
                                        fit="cover"
                                    />
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information && detailData.information.store_introduce">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>门店介绍：</label>
                                <span>@{{ detailData.information.store_introduce }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="20" class="mt-2" v-if="detailData.information && detailData.information.shop_commission !== undefined">
                        <el-col :span="12">
                            <div class="detail-item">
                                <label>平台提成比例：</label>
                                <span>@{{ detailData.information.shop_commission }}%</span>
                            </div>
                        </el-col>
                        <el-col :span="12" v-if="detailData.validity !== undefined">
                            <div class="detail-item">
                                <label>有效期（天）：</label>
                                <span>@{{ detailData.validity > 0 ? detailData.validity : '永久' }}</span>
                            </div>
                        </el-col>
                    </el-row> -->
                </el-card>

                <!-- 证件信息 -->
                <el-card class="mb-3">
                    <div slot="header">
                        <span><i class="el-icon-document"></i> 证件信息</span>
                    </div>
                    <el-row :gutter="20" v-if="detailData.information">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>营业执照：</label>
                                <div v-if="detailData.information.aptitude_imgs && detailData.information.aptitude_imgs.length > 0" class="image-preview-list">
                                    <el-image
                                        v-for="(img, index) in detailData.information.aptitude_imgs"
                                        :key="index"
                                        class="preview-thumbnail"
                                        :src="img"
                                        :preview-src-list="detailData.information.aptitude_imgs"
                                        :initial-index="index"
                                        fit="cover"
                                    />
                                </div>
                                <span v-else>未提供</span>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="20" class="mt-2" v-if="detailData.information">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>身份证：</label>
                                <div v-if="detailData.information.id_card_imgs && detailData.information.id_card_imgs.length > 0 && detailData.information.id_card_imgs.some(img => img && img !== '')" class="image-preview-list">
                                    <div v-for="(img, index) in detailData.information.id_card_imgs.filter(img => img && img !== '')" :key="index" class="image-item">
                                        <img 
                                            :src="img"
                                            class="preview-thumbnail" 
                                            @click="openImagePreview(img, detailData.information.id_card_imgs.filter(img => img && img !== ''))"
                                            :alt="index === 0 ? '身份证正面' : '身份证反面'"
                                        />
                                        <div class="image-label">@{{ index === 0 ? '正面' : '反面' }}</div>
                                    </div>
                                </div>
                                <span v-else>未提供</span>
                            </div>
                        </el-col>
                    </el-row> -->
                    <el-row :gutter="20" class="mt-2" v-if="detailData.information && detailData.information.other_imgs && detailData.information.other_imgs.length > 0">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>其他图片：</label>
                                <div class="image-preview-list">
                                    <el-image
                                        v-for="(img, index) in detailData.information.other_imgs"
                                        :key="index"
                                        class="preview-thumbnail"
                                        :src="img"
                                        :preview-src-list="detailData.information.other_imgs"
                                        :initial-index="index"
                                        fit="cover"
                                    />
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 审核信息 -->
                <el-card v-if="detailData.review_info && detailData.review_info.reviewed_at">
                    <div slot="header">
                        <span><i class="el-icon-check"></i> 审核信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="detail-item">
                                <label>审核时间：</label>
                                <span>@{{ detailData.review_info.reviewed_at || (detailData.information && detailData.information.reviewed_at) }}</span>
                            </div>
                        </el-col>
                        <!-- <el-col :span="8">
                            <div class="detail-item">
                                <label>审核人ID：</label>
                                <span>@{{ detailData.review_info.reviewer_id || (detailData.information && detailData.information.reviewer_id) || '无' }}</span>
                            </div>
                        </el-col> -->
                    </el-row>
                    <el-row :gutter="20" class="mt-2" v-if="(detailData.review_info && detailData.review_info.review_comment) || (detailData.information && detailData.information.review_comment)">
                        <el-col :span="24">
                            <div class="detail-item">
                                <label>审核备注：</label>
                                <span>@{{ detailData.review_info.review_comment || (detailData.information && detailData.information.review_comment) }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
            <template v-if="detailData && detailData.status === 0">
                <el-button type="success" @click="approveFromDetail" :loading="detailLoading">审核通过</el-button>
                <el-button type="danger" @click="rejectFromDetail" :loading="detailLoading">审核拒绝</el-button>
            </template>
        </div>
    </el-dialog>

</div>
<script>
new Vue({
    el: '#appvue',
    data() {
        return {
            loading: false,
            pagination: { page: 1, pageSize: 10, total: 0 },
            searchForm: {
                store_name: '',
                applicant_id: '',
                applicant_info: '',
                province: '',
                city: '',
                district: '',
                date_range: [],
                status: ''
            },
            applications: [],
            categories: [], // 门店分类数据
            provinces: [], // 省份数据
            cities: [], // 城市数据
            districts: [], // 区县数据
            rejectDialogVisible: false,
            rejectForm: {
                id: null,
                reason: ''
            },
            rejecting: false,
            detailDialogVisible: false,
            detailLoading: false,
            detailData: null,
            approveDialogVisible: false,
            approveForm: {
                id: null,
                enableQuota: true,
                quotaAmount: '1000.00'
            },
            approveSubmitting: false,
            approveFromDetail: false
        }
    },
    mounted() {
        // this.loadCategories();
        this.loadProvinces();
        this.fetchList();
    },
    methods: {
        // 拉取列表
        async fetchList() {
            this.loading = true;
            try {
                const params = Object.assign({}, this.searchForm, {
                    page: this.pagination.page,
                    pageSize: this.pagination.pageSize,
                });
                
                const response = await storeApplyApi.getList(params);
                if (response && response.status === 'success') {
                    this.applications = response.data.list || [];
                    if (response.data.pagination) {
                        this.pagination = response.data.pagination;
                    }
                }
            } catch (e) {
                console.error('fetch list error', e);
                this.$message && this.$message.error('加载列表失败');
            } finally {
                this.loading = false;
            }
        },
        

        // 加载门店分类
        async loadCategories() {
            try {
                const response = await storeApplyApi.getCategories();
                if (response && response.status === 'success') {
                    this.categories = response.data || [];
                } else {
                    // 如果接口失败，使用默认数据
                    this.categories = [
                        {id: 1, name: '便利店'},
                        {id: 2, name: '超市'},
                        {id: 3, name: '餐饮店'},
                        {id: 4, name: '服装店'},
                        {id: 5, name: '其他'}
                    ];
                }
            } catch (e) {
                console.error('load categories error', e);
                // 使用默认数据
            this.categories = [
                {id: 1, name: '便利店'},
                {id: 2, name: '超市'},
                {id: 3, name: '餐饮店'},
                {id: 4, name: '服装店'},
                {id: 5, name: '其他'}
            ];
            }
        },

        // 加载省份数据
        async loadProvinces() {
            try {
                const response = await storeApplyApi.getProvinces();
                if (response && response.status === 'success') {
                    this.provinces = response.data || [];
                } else {
                    console.error('加载省份数据失败');
                    this.provinces = [];
                }
            } catch (e) {
                console.error('load provinces error', e);
                this.provinces = [];
            }
        },

        // 省份改变时加载城市
        async onProvinceChange(provinceId) {
            this.searchForm.city = '';
            this.searchForm.district = '';
            this.cities = [];
            this.districts = [];
            
            if (provinceId) {
                try {
                    const response = await storeApplyApi.getCities(provinceId);
                    if (response && response.status === 'success') {
                        this.cities = response.data || [];
                    } else {
                        console.error('加载城市数据失败');
                        this.cities = [];
                    }
                } catch (e) {
                    console.error('load cities error', e);
                    this.cities = [];
                }
            }
        },

        // 城市改变时加载区县
        async onCityChange(cityId) {
            this.searchForm.district = '';
            this.districts = [];
            
            if (cityId) {
                try {
                    const response = await storeApplyApi.getDistricts(cityId);
                    if (response && response.status === 'success') {
                        this.districts = response.data || [];
                    } else {
                        console.error('加载区县数据失败');
                        this.districts = [];
                    }
                } catch (e) {
                    console.error('load districts error', e);
                    this.districts = [];
                }
            }
        },
        
        // 搜索
        handleSearch() {
            this.pagination.page = 1;
            this.fetchList();
        },
        
        // 重置
        handleReset() {
            this.searchForm = {
                store_name: '',
                applicant_id: '',
                applicant_info: '',
                province: '',
                city: '',
                district: '',
                date_range: [],
                status: ''
            };
            this.cities = [];
            this.districts = [];
            this.pagination.page = 1;
            this.fetchList();
        },
        
        // 当前页改变
        handleCurrentChange(val) {
            this.pagination.page = val;
            this.fetchList();
        },
        
        // 获取状态类型
        getStatusType(statusClass) {
            switch (statusClass) {
                case 'badge-warning':
                    return 'warning';
                case 'badge-success':
                    return 'success';
                case 'badge-danger':
                    return 'danger';
                default:
                    return 'info';
            }
        },
        
        // 审核通过
        approveApplication(id) {
            this.openApproveDialog(id, false);
        },

        openApproveDialog(id, fromDetail = false) {
            this.approveForm.id = id;
            this.approveForm.enableQuota = true;
            this.approveForm.quotaAmount = '1000.00';
            this.approveDialogVisible = true;
            this.approveFromDetail = fromDetail;
        },

        handleApproveDialogClose() {
            this.approveFromDetail = false;
            this.approveSubmitting = false;
            this.approveForm.id = null;
            this.approveForm.enableQuota = true;
            this.approveForm.quotaAmount = '1000.00';
        },

        parseQuotaAmount(value) {
            if (typeof value === 'number') {
                return Number.isFinite(value) ? parseFloat(value.toFixed(2)) : NaN;
            }
            if (typeof value === 'string') {
                const cleaned = value.replace(/[^\d.]/g, '');
                if (!cleaned) {
                    return NaN;
                }
                const parsed = parseFloat(cleaned);
                if (Number.isNaN(parsed)) {
                    return NaN;
                }
                return parseFloat(parsed.toFixed(2));
            }
            return NaN;
        },

        async submitApprove() {
            if (!this.approveForm.id) {
                return;
            }

            const amount = this.approveForm.enableQuota ? this.parseQuotaAmount(this.approveForm.quotaAmount) : 0;
            if (this.approveForm.enableQuota && (Number.isNaN(amount) || amount <= 0)) {
                this.$message.error('请输入有效的授信额度金额');
                return;
            }

            this.approveSubmitting = true;
            try {
                const payload = {
                    enable_quota: this.approveForm.enableQuota ? 1 : 0,
                    quota_amount: amount
                };
                const response = await storeApplyApi.approve(this.approveForm.id, payload);
                if (response && response.status === 'success') {
                    this.$message.success(response.message || '审核通过成功');
                    const fromDetail = this.approveFromDetail;
                    this.approveDialogVisible = false;
                    if (fromDetail && this.detailDialogVisible) {
                        this.detailDialogVisible = false;
                    }
                    this.fetchList(); // 重新加载列表
                }
            } catch (error) {
                console.error('approve error', error);
            } finally {
                this.approveSubmitting = false;
            }
        },
        
        // 拒绝申请
        rejectApplication(id) {
            this.rejectForm.id = id;
            this.rejectForm.reason = '';
            this.rejectDialogVisible = true;
        },
        
        // 确认拒绝
        async confirmReject() {
            if (!this.rejectForm.reason.trim()) {
                this.$message.error('请输入拒绝原因');
                return;
            }
            
            this.rejecting = true;
            try {
                const response = await storeApplyApi.reject(this.rejectForm.id, {
                reason: this.rejectForm.reason
                });
                if (response && response.status === 'success') {
                    this.$message.success(response.message || '审核拒绝成功');
                    this.rejectDialogVisible = false;
                    this.fetchList(); // 重新加载列表
                }
            } catch (error) {
                console.error('reject error', error);
            } finally {
                this.rejecting = false;
            }
        },
        
        // 显示详情
        async showDetail(id) {
            this.detailDialogVisible = true;
            this.detailLoading = true;
            this.detailData = null;
            
            try {
                const response = await storeApplyApi.getDetail(id);
                if (response && response.status === 'success') {
                    this.detailData = response.data;
                } else {
                    this.$message.error('加载详情失败');
                }
            } catch (error) {
                console.error('show detail error', error);
                this.$message.error('加载详情失败');
            } finally {
                this.detailLoading = false;
            }
        },

        // 从详情页审核通过
        approveFromDetail() {
            if (!this.detailData) return;
            this.openApproveDialog(this.detailData.id, true);
        },

        // 从详情页审核拒绝
        rejectFromDetail() {
            if (!this.detailData) return;
            
            this.rejectForm.id = this.detailData.id;
            this.rejectForm.reason = '';
            this.detailDialogVisible = false;
            this.rejectDialogVisible = true;
        }
    }
});
</script>

<style>
.page-header {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 20px;
}

.search-form .el-form-item {
    margin-bottom: 10px;
}

.applicant-info {
    display: flex;
    align-items: center;
}

.applicant-info .info-text {
    margin-left: 8px;
}

.applicant-info .name {
    font-weight: 500;
    font-size: 14px;
}

.applicant-info .id {
    font-size: 12px;
    color: #909399;
}

.store-name {
    font-weight: 500;
    margin-bottom: 2px;
}

.address {
    font-size: 12px;
    margin-bottom: 2px;
}

.category {
    font-size: 12px;
}

.reviewed-time {
    font-size: 11px;
    margin-top: 2px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
}

.text-muted {
    color: #909399;
}

.text-info {
    color: #409EFF;
}

.ml-1 {
    margin-left: 4px;
}

.ml-2 {
    margin-left: 8px;
}

.mr-2 {
    margin-right: 8px;
}

.mb-4 {
    margin-bottom: 24px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-3 {
    margin-top: 16px;
}

.form-text {
    font-size: 12px;
}

/* 详情页面样式 */
.detail-content .detail-item {
    margin-bottom: 12px;
}

.detail-content .detail-item label {
    font-weight: 500;
    color: #606266;
    margin-right: 8px;
    min-width: 80px;
    display: inline-block;
}

.detail-content .detail-item span {
    color: #303133;
}

.detail-content .el-card {
    margin-bottom: 16px;
}

.detail-content .el-card:last-child {
    margin-bottom: 0;
}

.detail-content .el-card__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}

.detail-content .el-card__header span {
    font-weight: 500;
    color: #303133;
}

.detail-content .el-card__header i {
    margin-right: 6px;
    color: #409EFF;
}

.text-center {
    text-align: center;
}

/* 图片预览样式 */
.image-preview-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preview-thumbnail:hover {
    border-color: #409EFF;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.image-label {
    margin-top: 5px;
    font-size: 12px;
    color: #606266;
    text-align: center;
}

.detail-item label {
    vertical-align: top;
}

</style>